const path = require('path');

const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: path.join(__dirname, "./src/main.ts"),
    output: {
        path: path.join(__dirname, "./dist"),
        filename: "main.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.s[a|c]ss$/i,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
              test: /\.ts$/i,
              use: ["ts-loader"],
            },
            {
              test: /\.(png|jpe?g|gif|webp)$/,
              type: "asset",
              parser: {
                dataUrlCondition: {
                  maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
                },
              },
              generator: {
                // 将图片文件输出到 static/imgs 目录中
                // 将图片文件命名 [hash:8][ext][query]
                // [hash:8]: hash值取8位
                // [ext]: 使用之前的文件扩展名
                // [query]: 添加之前的query参数
                filename: "static/imgs/[hash:8][ext][query]",
              },
            },
            {
              test: /\.js$/,
              exclude: /node_modules/, // 排除node_modules代码不编译
              loader: "babel-loader",
            },
            {
              test: /\.(ttf|woff2?)$/,
              type: "asset/resource",
              generator: {
                filename: "static/media/[hash:8][ext][query]",
              },
            },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, "./public/index.html"),
            inject: 'body'
        })
    ],
    mode: "development",
    devServer: {
        host: "127.0.0.1",
        port: 8080,
        open: true, // 是否自动打开浏览器,
        compress: true, //开启gzip 
        hot: true,
    },
    resolve: {
      alias: {
        "@": "./src",
      },
      // 配置省略文件路径的后缀名
      extensions: [".ts", ".js", ".cjs", ".json"],
      // 告诉webpack 解析模块失去找哪个个目录
      // 迅速找到node_modules所在
      modules: [path.resolve(__dirname, "../../node_modules"), "node_modules"],
    },
    optimization: {
      usedExports: true,
    },
}
